<template>
  <div class="goodsdetail">
    <DetailHeader></DetailHeader>

    <DetailLun :lunbo="lunbo"></DetailLun>

    <DetailOther :detail="detail"></DetailOther>

    <DetailAddress></DetailAddress>

    <DetailXiang :detaildesc="detaildesc"></DetailXiang>
  </div>
  <DetailFooter></DetailFooter>
</template>

<script>
import { getDetail } from '@/apis/goods';

import DetailLun from './components/DetailLun.vue';
import DetailHeader from './components/DetailHeader.vue';
import DetailOther from './components/DetailOther.vue';
import DetailXiang from './components/DetailXiang.vue';
import DetailFooter from './components/DetailFooter.vue';
import DetailAddress from './components/DetailAddress.vue';

export default {
  data() {
    return {
      detail: {},
      lunbo: [],
      detaildesc: []
    }
  },
  components: {
    DetailLun,
    DetailHeader,
    DetailOther,
    DetailXiang,
    DetailFooter,
    DetailAddress
  },

  created() {
    getDetail(this.$route.params.id).then(res => {
      console.log(res.data.data);
      this.detail = res.data.data
      this.lunbo = res.data.data.banners[0].split(",")
      // console.log(res.data.data.banners[0].split(","));
      this.detaildesc = res.data.data.desc
      // console.log(res.data.data.desc.split("，"));
    })
  },
  methods:{

  }
}
</script>

<style lang="less">
.goodsdetail {
  background-color: rgb(227, 230, 234);
  height: calc(100% - 50px);
  overflow-y: auto;
}
</style>